import React, { Component } from 'react'
// 类组件的状态其实就是类组件实例的私有数据. 但是不能说实例的私有数据就是状态
export default class Count extends Component {
  constructor() {
    super()

    this.state = {
      c: 1,
      msg: '123',
    }
  }
  render() {
    //render的this一定是组件实例
    console.log('render函数执行了')
    return (
      <div>
        {/* 使用状态: 状态一定是要在render中渲染出来的 */}
        <p id="p">{this.state.c}</p>
        <p>{this.state.msg}</p>
        <button
          onClick={() => {
            // this.setState((newState) => {
            //   console.log('回调执行了')
            //   return {
            //     c: newState.c + 1,
            //   }
            // })

            // this.setState((newState) => {
            //   // 这个函数,是当上一次的数据修改完毕之后,才调用.并且可以接收到修改之后的最新的数据(但是this.state.c还不是最新的数据)
            //   return {
            //     c: newState.c + 2,
            //   }
            // })
            // this.setState((newState) => {
            //   // 这个函数,是当上一次的数据修改完毕之后,才调用.并且可以接收到修改之后的最新的数据
            //   return {
            //     c: newState.c + 3,
            //   }
            // })

            // console.log('主线程执行完毕')

            // this.setState的第二个参数
            // this.setState(对象/回调, 函数)

            this.setState({
              c: this.state.c + 1,
            })
            this.setState(
              (newState) => {
                console.log(
                  '第一个参数的回调',
                  newState.c,
                  document.getElementById('p').innerText
                )
              },
              () => {
                //第二个参数的函数,是在数据修改完毕并且组件更新完毕(页面渲染完毕)才执行
                console.log(
                  '第二个参数的回调',
                  this.state.c,
                  document.getElementById('p').innerText
                )
              }
            )
          }}
        >
          +
        </button>
      </div>
    )
  }
}
